<!DOCTYPE html>
<html lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="format-detection" content="telephone=no">
        <title>店员自我修养</title>
        <link rel="stylesheet" type="text/css" href="css/timemachine.css" media="all" />
        <script src="js/maidian.js"></script>
        <script>
            ! function(a, b) {
                function c() {
                    var b = f.getBoundingClientRect().width;
                    b / i > 540 && (b = 540 * i);
                    var c = b / 10;
                    f.style.fontSize = c + "px", k.rem = a.rem = c
                }
                var d, e = a.document,
                    f = e.documentElement,
                    g = e.querySelector('meta[name="viewport"]'),
                    h = e.querySelector('meta[name="flexible"]'),
                    i = 0,
                    j = 0,
                    k = b.flexible || (b.flexible = {});
                if(g) {
                    console.warn("将根据已有的meta标签来设置缩放比例");
                    var l = g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
                    l && (j = parseFloat(l[1]), i = parseInt(1 / j))
                } else if(h) {
                    var m = h.getAttribute("content");
                    if(m) {
                        var n = m.match(/initial\-dpr=([\d\.]+)/),
                            o = m.match(/maximum\-dpr=([\d\.]+)/);
                        n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((1 / i).toFixed(2)))
                    }
                }
                if(!i && !j) {
                    var p = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi)),
                        q = a.devicePixelRatio;
                    i = p ? q >= 3 && (!i || i >= 3) ? 3 : q >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i
                }
                if(f.setAttribute("data-dpr", i), !g)
                    if(g = e.createElement("meta"), g.setAttribute("name", "viewport"), g.setAttribute("content", "initial-scale=" + j + ", maximum-scale=" + j + ", minimum-scale=" + j + ", user-scalable=no"), f.firstElementChild) f.firstElementChild.appendChild(g);
                    else {
                        var r = e.createElement("div");
                        r.appendChild(g), e.write(r.innerHTML)
                    }
                a.addEventListener("resize", function() {
                    clearTimeout(d), d = setTimeout(c, 300)
                }, !1), a.addEventListener("pageshow", function(a) {
                    a.persisted && (clearTimeout(d), d = setTimeout(c, 300))
                }, !1), "complete" === e.readyState ? e.body.style.fontSize = 12 * i + "px" : e.addEventListener("DOMContentLoaded", function() {
                    e.body.style.fontSize = 12 * i + "px"
                }, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function(a) {
                    var b = parseFloat(a) * this.rem;
                    return "string" == typeof a && a.match(/rem$/) && (b += "px"), b
                }, k.px2rem = function(a) {
                    var b = parseFloat(a) / this.rem;
                    return "string" == typeof a && a.match(/px$/) && (b += "rem"), b
                }
            }(window, window.lib || (window.lib = {}));
        </script>
    </head>

    <body id="home" v-cloak>
        <!-- 店+分享入口需要 -->
        <snsawp sharetitle="{{user.name}}加入苏宁{{user.totalDay}}天，{{parseInt(user.entryPercent,10)}}%的同事都要喊我{{user.gender=='M'?'湿兄':'湿姐'}},我骄傲了吗？我膨胀了吗？"
                sharedescription="店+带你玩穿越，让你寻找从前的自己，你想回去吗？"
                :shareimage="shareimage" :shareurl="shareurl"></snsawp>

        <div class="stars">
            <span class="star s0"></span>
            <span class="star s9"></span>
            <span class="star s1"></span>
            <span class="star s2"></span>
            <span class="star s3"></span>
            <span class="star s4"></span>
            <span class="star s5"></span>
            <span class="star s6"></span>
            <span class="star s7"></span>
            <img class="move-star ms1" src="img/stars.png" alt="" />
            <img class="move-star ms2" src="img/stars.png" alt="" />
        </div>
        <!-- 公共的底  公共的向下箭头 -->
        <!--<img class="next-page" src="img/next.png" alt="">-->

        <template v-if="pageloading">
            <img class="page-loading" src="img/loading.gif" alt="">
        </template>
        <template v-else>
            <div class="init-page">
                <img class="book-img" src="img/001-01.png" alt="" />
                <img class="words-img" src="img/001-words.png" alt="" />
                <img class="person-img" src="img/001-03.png" alt="" />
                <img class="house-img" src="img/house.png" alt="" />
            </div>
            <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <!-- 引导页 -->
                    <div class="swiper-slide page1">
                        <img class="book-img" src="img/001-01.png" alt="" />
                        <img class="words-img" src="img/001-words.png" alt="" />
                        <img class="person-img" src="img/001-03.png" alt="" />
                        <img class="house-img" src="img/house.png" alt="" />
                        <img class="next-page" src="img/next.png" alt="">
                    </div>
                    <!-- 工作时间 -->
                    <div v-if="user" class="swiper-slide page2">
                        <p>我是<span class="name">{{user.name}}</span></p>
                        <p>今天是我在苏宁的</p>
                        <p>第<span class="days">{{user.totalDay}}</span>天</p>
                        <img class="words-img" :src="user.gender=='M'?'img/002-words.png':'img/002-words-girl.png'" alt="" />
                        <template v-if="user.gender=='M'">
                            <img class="person-img" src="img/002-boy.png" alt="" />
                        </template>
                        <template v-else>
                            <img class="person-img" src="img/002-girl.png" alt="" />
                        </template>
                        <div class="time-img">
                            <img class="time-s" src="img/time-s.png" alt="" />
                        </div>
                        <img class="next-page" src="img/next.png" alt="">
                    </div>
                    <!--入职时间-->
                    <div v-if="user" class="swiper-slide page3">
                        <p class="date-time">{{user.entryDate}}</p>
                        <p>我加入了苏宁的大家庭</p>
                        <p><span class="point">{{user.entryPercent}}</span>的同事都要叫我一声<span class="nickname">{{user.gender=='M'?"湿兄":"湿姐"}}</span></p>
                        <img class="words-img" src="img/003-words.png" alt="" />

                        <img class="fans f1" src="img/fan-01.png" alt="" />
                        <img class="fans f2" src="img/fan-02.png" alt="" />
                        <img class="fans-tips" :src="user.gender=='M'?'img/tips-boy.png':'img/tips-girl.png'" alt="" />
                        <img class="person-img" :src="user.gender=='M'?'img/003-boy.png':'img/003-girl.png'" alt="" />
                        <img class="fans f3" src="img/fan-03.png" alt="" />
                        <img class="fans f4" src="img/fan-04.png" alt="" />
                        <img class="next-page" src="img/next.png" alt="">
                    </div>

                    <!--第一次销售有数据-->
                    <div v-if="allSale" class="swiper-slide page4">
                        <p v-if="signsYear==1" class="date-time">{{allSale.first.firstSaleDate}} {{allSale.first.weekDay}}</p>
                        <p v-if="signsYear==1">我第一次达成销售</p>
                        <p v-if="signsYear==1" class="amount">&yen;{{allSale.first.amount}}</p>
                        <p v-if="signsYear==0">翻了半天账本我的销售最早记录</p>
                        <p v-if="signsYear==0" class="date-time">{{allSale.first.firstSaleDate}} {{allSale.first.weekDay}}</p>
                        <p v-if="signsYear==0" class="amount">&yen;{{allSale.first.amount}}</p>
                        <div class="sale-info">
                            <img :src="'img/category/'+allSale.first.type+'.png'" alt="" />
                            <div class="info">
                                <p class="name">{{allSale.first.cmmdtyName}}</p>
                                <p class="amount">&yen; {{allSale.first.cmmdtyAmount}}</p>
                                <p>x {{allSale.first.cmmdtyNum}}</p>
                            </div>
                        </div>
                        <img class="words-img" src="img/004-words.png" alt="" />
                        <div>
                            <img class="heart h1" src="img/004-heart.png" alt="" />
                            <img class="heart h2" src="img/004-heart.png" alt="" />
                            <img class="heart h3" src="img/004-heart.png" alt="" />
                        </div>
                        <img class="man m1" src="img/004-leftman.png" alt="" />
                        <img class="man m2" src="img/004-rightman.png" alt="" />
                        <img class="next-page" src="img/next.png" alt="">
                    </div>
                    <!-- 总销售数量 -->
                    <div v-if="allSale" class="swiper-slide page5">
                        <p class="date-time">截止 <span>2016.12.31</span></p>
                        <p>我累计产生销售</p>
                        <p class="amount">&yen;{{parseFloat(allSale.total.amount,10) | currency ''}}</p>
                        <p class="order-num">平均一个月就产生<span>{{allSale.total.orderNumPerMonth}}</span>笔订单</p>

                        <img v-if="allSale.total.state==1" class="words-img" src="img/005-words.png" alt="" />
                        <img v-if="allSale.total.state==0" class="words-img bad" src="img/bad-words.png" alt="" />
                        <div class="gift-img" :class="{'bad':allSale.total.state==0}"></div>
                        <img v-if="allSale.total.state==1" class="happy-img" src="img/005-happy.png" alt="" />
                        <img v-if="allSale.total.state==0" class="bad-img bad1" src="img/005-bad1.png" alt="" />
                        <img v-if="allSale.total.state==0" class="bad-img bad2" src="img/005-bad2.png" alt="" />
                        <img v-if="allSale.total.state==0" class="bad-img bad3" src="img/005-bad3.png" alt="" />
                        <img class="next-page" src="img/next.png" alt="">
                    </div>

                    <!-- 有今年的销售数据-->
                    <!-- 回到今年 -->
                    <div v-if="curYearSale" class="swiper-slide page6">
                        <p>2016年的某天</p>
                        <p>我爱上一个人</p>
                        <p>不是因为他有房有车</p>
                        <p>而是因为那天下午</p>
                        <p>阳光很好</p>
                        <p>他恰好找我买了&nbsp;&nbsp;"<span class="type-name">{{curYearSale.mostSale.typeName}}</span>"</p>
                        <a href="javascript:;" class="ufo">回到2016</a>
                        <img class="next-page" src="img/next.png" alt="">
                    </div>
                    <!-- 土豪客户 -->
                    <div v-if="curYearSale" class="swiper-slide page7">
                        <p><span>{{curYearSale.mostSale.date}}</span>我邂逅了<span>{{curYearSale.mostSale.customName}}</span></p>
                        <p class="sale-amount">他买了一台价值<span class="amount">{{curYearSale.mostSale.amount}}</span>的<span>{{curYearSale.mostSale.typeName}}</span></p>
                        <div class="invoice-bg">
                            <p class="name">{{curYearSale.mostSale.cmmdtyName}}</p>
                            <p class="num">x {{curYearSale.mostSale.cmmdtyNum}}</p>
                            <p class="amount">&yen; {{curYearSale.mostSale.amount}}</p>
                        </div>
                        <img class="words-img" src="img/rich-words.png" alt="" />
                        <img class="person-img" src="img/rich-man.png" alt="" />
                        <img class="next-page" src="img/next.png" alt="">
                    </div>
                    <!-- 擅长品类 -->
                    <div v-if="curYearSale" class="swiper-slide page8">
                        <p>2016年我接待超过<span>{{curYearSale.statictisInfo.customerNum}}</span>个客户</p>
                        <p v-if="categoryList && categoryList.length == 1">他们主要找我买的都是<span> "{{categoryList[0].typeName}}"</span></p>
                        <p class="category2" v-if="categoryList && categoryList.length > 1">他们主要找我买的都是<span> "{{categoryList[0].typeName}}"</span>和<span>"{{categoryList[1].typeName}}"</span></p>
                        <div class="category-list" v-if="categoryList && categoryList.length > 1">
                            <template v-for="category in categoryList">
                                <div class="circle c{{$index+1}}">
                                    <p>
                                        <span>{{category.typeName}}</span>
                                        <span class="pencent">{{category.percent}}</span>
                                    </p>
                                </div>
                            </template>
                        </div>
                        <template v-if="categoryList && categoryList.length == 1">
                            <img class="category1" src="img/category/{{categoryList[0].type}}.png" />
                        </template>
                        <img class="words-img" src="img/cate-words.png" alt="" />
                        <img class="person-img" src="img/cate-person.png" alt="" />
                        <img class="you y1" src="img/you1.png" alt="" />
                        <img class="you y2" src="img/you2.png" alt="" />
                        <img class="you y3" src="img/you3.png" alt="" />
                        <img class="you y4" src="img/you4.png" alt="" />
                        <img class="next-page" src="img/next.png" alt="">
                    </div>

                    <!-- 我的客户 -->
                    <div v-if="curYearSale && customerList.length != 0" class="swiper-slide page9">
                        <p>在我接待的这么多客户中</p>
                        <p class="customer-num">有<span> {{curYearSale.oldCustomerPercent}} </span>的老客户</p>
                        <template v-for="customer in customerList">
                            <div class="customer cus{{$index+1}}">
                                <div class="top-icon top{{$index+1}}"></div>
                                <img class="head-icon" src="img/customer/head-m{{$index+1}}.png" alt="" />
                                <div class="info">
                                    <p>{{customer.name}}</p>
                                    <p>累计在我这买了<span>{{customer.num}}</span>次</p>
                                </div>
                            </div>
                        </template>
                        <img class="words-img" src="img/customer-words.png" alt="" />
                        <img class="person-img" src="img/customer-person.png" alt="" />
                        <img class="next-page" src="img/next.png" alt="">
                    </div>

                    <!--无销售数据 或者 无今年的销售数据 或者流程结束-->
                    <div v-if="user" class="swiper-slide nosale">
                        <p v-if="!allSale">暂无法追溯到你的销售成绩</p>
                        <p v-else>公司的发展，离不开你的努力</p>
                        <p v-if="!allSale">但公司的发展，也离不开你的努力</p>
                        <p v-else class="thks">感谢你的付出！</p>
                        <div class="fireworks">
                            <img class="fw1" src="img/fireworks.png" />
                            <img class="fw2" src="img/fireworks.png" />
                            <img class="fw3" src="img/fireworks.png" />
                        </div>
                        <p v-if="couponVo.name && user.isGotCoupon==1" class="ticket-tips">券已发到你工号绑定的易购账号里咯！</p>
                        <p v-if="couponVo.name && user.isGotCoupon!=1" class="ticket-tips">为了感激你，送你一张{{couponVo.price}}元券</p>

                        <div class="ticket" :class="{'dis':!couponVo.name || user.isGotCoupon==1}">
                            <div v-if="couponVo.name" class="value">&yen;<span>{{couponVo.price}}</span></div>
                            <div v-else class="value">&yen;<span>5</span></div>
                            <div class="info">
                                <p class="name">{{couponVo.name1}}</p>
                                <p class="name">{{couponVo.name2}}</p>
                                <p class="rule">{{couponVo.rule}}</p>
                            </div>
                            <div class="got">
                                <!--icon 默认， got 已领取 ，overdue 已领完 ，nobind，没有绑定易购号  -->
                                <a href="javascript:;" class="icon" :class="{'got':user.isGotCoupon==1,'overdue':!couponVo.name}" @click="getEbuyNo()"></a>
                            </div>
                        </div>
                        <!-- 券没有被领券 并且 有券信息 -->
                        <p class="ticket-address" v-if="user.isGotCoupon!=1 && couponVo.name && bindNo!=''">券将发到你绑定的易购账号{{bindNo}}
                            <a href="javascript:;" @click="changeId()" style="color: #ff6600;">(更换账号)</a>
                        </p>
                        <p class="ticket-address" v-if="user.isGotCoupon!=1 && couponVo.name && bindNo==''">你的工号暂未绑定易购账号，无法领券{{bindNo}}
                            <a href="javascript:;" @click="toBindId()" style="color: #ff6600;">(去绑定)</a>
                        </p>
                        <a href="javascript:;" class="share" @click="toShare()">分享给其他同事玩</a>
                        <a v-if="!isShopPlus" href="http://mapp.suning.com/a.php?s=qrcode/offline&f=suningplus&pack=com.suning.mobile.im.clerk" class="download">下载店+</a>
                    </div>
                </div>
            </div>
            <div class="share-bg" v-show="isShare">
              <img src="img/share-arrow.png" alt="" />
              <p>将页面分享给小伙伴吧~~</p>
              <a href="javascript:;" @click="knowShare">我知道了</a>
            </div>
        </template>

        <div class="popup bind-pop" v-show="bindpop" style="display: none;">
            <div class="bg"></div>
            <div class="cnt">
                <p class="title">绑定易购账号</p>
                <div class="ipt-num">
                    <input v-model="bindid" />
                    <p class="err" v-show="binderr!=''"><span>×</span>{{binderr}}</p>
                </div>
                <p class="foot">
                    <a class="cancel" href="javascript:;" @click="cancelbind()">取消</a>
                    <a href="javascript:;" @click="surebind()">确定</a>
                </p>
            </div>
        </div>
        <div class="tips-pop" v-show="tipspop" style="display: none;">{{tipsErrMsg}}</div>
        <section class="loading" v-show="loading" style="display: none;">
            <img class="page-loading" src="img/loading.gif" alt="">
        </section>
        <script>
            //微信才有分享
            if(/MicroMessenger/.test(navigator.userAgent)) {
                var script = document.createElement("script");
                script.src = "https://res.wx.qq.com/open/js/jweixin-1.0.0.js";
                document.body.appendChild(script);
            }
        </script>
        <script src="js/vue.min.js"></script>
        <script src="js/zepto.min.js"></script>

        <!--<script src="js/passport.js"></script>-->

        <script src="js/swiper.min.js"></script>
        <script src="js/common.js"></script>
        <script src="js/timemachine.js"></script>
    </body>

</html>
